@media screen and (min-width: 700px) {
    .div-box{
        font-size: 40vmin !important;
        height: 500px;
        width: 500px;
    }
    
    .contenant-surprise-box{
        height: 35vw;
    }
    
    /* Box */
    .ring{
        height: 10vw;
        width: auto;
    }
    
    .box {
        --boxInnerText: '';
        position: relative;
        width: 20vw;
        height: 20vw;
        transform-style: preserve-3d;
        transform: rotateX(-25deg) rotateY(-25deg);
        margin-top: 5vw;
    }
    
    .box-side {
        box-sizing: border-box;
        background-size: 200% 200% !important;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        font-family: "Rampart";
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transform-style: preserve-3d;
        border: 0.01rem solid rgba(60, 40, 60, 0.65);
        /* background: #5f3b5f url("https://media.istockphoto.com/photos/wood-desk-plank-to-use-as-background-or-texture-picture-id583726578?k=20&m=583726578&s=612x612&w=0&h=zQMLBQEMyUeEysawbYOO_zShPZHO5wS7EcKJLF8lrog="); */
        /* background: #5f3b5f url(""); */
        background: #5f3b5f url("../img/surpriseBox/textureBox.jpg");
    
    }
    
    .box-side span,
    .box-side-top::after {
        -webkit-text-stroke: 0.03em #eee;
    }
    
    .box-side-front {
        flex-direction: column;
        align-items: initial;
        font-size: 0.25rem;
        transform: translateZ(10vw);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .box-side-front::before,
    .box-side-front::after {
        position: absolute;
        font-size: 2.3vw;
        color: #aa9d56;
        font-family: "Rampart";
        width: 13vw;
        min-width: 1.5em;
    }
    
    .box-side-front::before {
        /* content: '🕷️'; */
        transform: translateX(0.02rem) rotate(-20deg);
    }
    
    .box-side-front::after {
        /* content: '🍭'; */
        display: flex;
        justify-content: center;
        content: var(--boxFront);
    }
    
    .box-side-back {
        transform: rotateY(180deg) translateZ(10vw);
    }
    
    .box-side-left {
        transform: rotateY(-90deg) translateZ(10vw);
    }
    
    .box-side-right {
        font-size: 0.2rem;
        transform: rotateY(90deg) translateZ(10vw);
    }
    
    .box-side-right::after {
        /* content: '🎃'; */
        font-size: 0.4rem;
    }
    
    .box-side-top {
        transform-origin: 0 0 0;
        transform: translateZ(-10vw) rotateX(90deg);
    }
    
    .box-side-top::before,
    .box-side-top::after {
        position: absolute;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }
    
    .box-side-top::before {
        /* content: '☠️'; */
        font-size: 0.4rem;
    }
    
    .box-side-top::after {
        content: var(--boxInnerText);
        font-weight: bold;
        font-size: 4vw;
        transform-style: preserve-3d;
        transform: rotateY(180deg) rotateZ(180deg) translateZ(0.00001rem);
    }
    
    .box-side-bottom {
        transform: rotateX(-90deg) translateZ(10vw);
    }
    
    .emoji {
        position: absolute;
        font-size: 10vw;
        transform: translate(calc(10vw - 50%), 10vw);
    }
    
    .or-text {
        font-size: 0.2rem;
        margin: 0.2em 0;
    }
    
    /* Open Box States */
    
    .box-open .box-side {
        cursor: auto;
    }
    
    .box-open .box-side-top {
        animation: openBox 1.2s ease-out forwards;
    }
    
    .box-open .emoji {
        animation: raiseEmoji 1s 1s ease-out forwards,
                   rotateEmoji 3s 2s linear infinite;
    }
    
    /* Animations */
    
    @keyframes openBox {
        100% {
            transform: translateZ(-10vw) rotateX(252deg);
        }
    }
    
    @keyframes raiseEmoji {
        100% {
            transform: translate(calc(10vw - 50%), -10vw);
        }
    }
    
    @keyframes rotateEmoji {
        0% {
            transform: translate(calc(10vw - 50%), -10vw) rotateY(0deg);
        }
        100% {
            transform: translate(calc(10vw - 50%), -10vw) rotateY(360deg);
        }
    }
  }